<script setup>
import { getDetail } from '@/apis/detail'
import { onMounted, ref } from 'vue'
import {useRoute} from 'vue-router'
const goods=ref({})
const route=useRoute()
const getGoods=async()=>{
  const res=await getDetail(route.params.id)
  goods.value=res.result
  console.log(goods.value)
}
let i=ref(0);
onMounted(()=>{
  getGoods()
})
</script>



<template>
<div style="width: 100%; text-align: left; clear: both;">
<el-breadcrumb separator=">">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item   v-if="goods.categories && goods.categories.length > 1" :to="{ path: `/category/${goods.categories[1].id}`}">{{goods.categories[1].name}}</el-breadcrumb-item>
    <el-breadcrumb-item   v-if="goods.categories && goods.categories.length > 0" :to="{ path: `/category/sub/${goods.categories[0].id}`}">{{goods.categories[0].name}}</el-breadcrumb-item>
    <el-breadcrumb-item>{{goods.name}}</el-breadcrumb-item>
  </el-breadcrumb>
</div>
<div class="container">
<div class="box">
<div class="im">
  <img v-if="goods.mainPictures && goods.mainPictures.length > 0"  :src="goods.mainPictures[i]" alt="">
</div>
<div class="liim-container">
<div class="liim" v-for="(item,index) in goods.mainPictures" :key="index">
  <img @click="i=index" v-if="goods.mainPictures && goods.mainPictures.length > 1"  :src="item" alt=""></img>
</div>
</div>
</div>
<div class="info"> 
  <h2>{{ goods.name }}</h2>
  <p class="price" style="color: red;">{{ goods.price }}</p>
  <!-- 选择样式: -->
<div class="container-sty">
  <div class="q" style="flex-direction: row;display: flex;" v-for="i in goods.specs">
<p>{{ i.name }}</p>
<select name="specs" id="">
  <option v-for="(item,index) in i.values" :key="index">{{ item.name }}</option>
</select>
</div>
</div>

<!-- 购买 -->
<div class="buy" style="margin-top:150px"> 
  <el-button type="primary">加入购物车</el-button>
</div>

</div>


</div>

<ul class="detail-info">
  <li>
    <p>销量人气</p>
    <p>{{ goods.discount}}</p>

  </li>
  <li>
    <p>商品评价</p>
    <p>{{ goods.commentCount }}</p>

  </li>
  <li>
    <p>收藏人气</p>
    <p>{{ goods.collectCount }}</p>

  </li>
  <li>
    <p>品牌信息</p>
    <p>{{ goods.desc }}</p>

  </li>
</ul>


</template>
<style>
.container{
  display: flex;

  width: 100%;
  height: 100%;
  background-color: aliceblue;
}
.box{
  width: 480px;
  height: 400px;
  background-color: aqua;
  margin-left: 200px;
 display: flex;
}

.info {
  width: 800px;
  height: 400px;
  background-color: aqua;
  display: flex;
  margin-left: 200px;
  flex-direction: column;
}

.im{
  width: 400px;
  height: 400px;
  background-color: aqua;
}

.liim-container {
  width: 80px;
  display: flex;
  flex-direction: column;

}

.liim{
  width: 80px;
  height: 80px;
  background-color: aqua;
}

.container-sty {
  display: flex;
  flex-direction: row;
}


.detail-info{
  width: 480px;
  height: 100px;
  padding: 300px;
  background-color: aqua;
  justify-content: space-around;
  padding: 10px 0;
  font-size: 20px;
  display: flex;

  border-bottom: 1px solid #eee;
  margin-left: 200px;
}
.detail-info li{
  display: flex;
  flex-direction: column;
  align-items: center;
}


</style>